<template>

    <div class="list">


        <div
                :style="{
      display: 'flex',
      width: '100%',
      boxSizing: 'border-box', flexWrap: 'wrap',marginLeft: '200px'
    }"

        >
            <a-card
                    class="card"
                    :style="{boxShadow: '#eee 20px 15px 25px',marginBottom: '20px'}"
                    hoverable
            >
            <a-page-header
                    :show-back="false"
                    :style="{ background: 'var(--color-bg-2)' }"
                    title="发布"

            >

                <a-form ref="formRef" size="medium" :model="form" :style="{width:'650px'}" @submit="handleSubmit">
                    <!--标题-->
                    <a-form-item field="title" label="标题"
                                 :rules="[{required:true,message:'必须填写标题'},
                                 {minLength:1,message:'标题不能为空'},
                                 {maxLength:30,message:'标题长度不能超过30'}
                                 ]"
                                 :validate-trigger="['change','input']"
                    >
                        <a-input v-model="form.title" placeholder="请输入标题" />
                    </a-form-item>
                    <!--描述-->
                    <a-form-item field="description" label="描述"
                                 :rules="[{required:true,message:'必须填写描述'},
                                 {minLength:1,message:'描述不能为空'}]"
                                 :validate-trigger="['change','input']"

                    >
                        <a-textarea placeholder="在这里输入描述,不能超过512个字"
                                    :max-length="512"
                                    allow-clear
                                    show-word-limit
                                    v-model="form.description"
                                    :auto-size="{ minRows:4, maxRows:6}"
                        />

                    </a-form-item>

                    <!--时间-->
                    <a-form-item field="createTime" label="时间">
                        <a-date-picker
                                showTime

                                @select="onSelect"
                                @change="onChange"
                                :style="style"
                        />
                    </a-form-item>
                    <!--地点-->
                    <a-form-item field="address" label="地点">
                        <a-space direction="vertical" size="large">
                            <a-input  placeholder="请输入地点" :max-length="20"
                                      show-word-limit allow-clear
                                      v-model="form.address"
                                      :rules="[{required:true,message:'必须填写地点'},
                                      {minLength:1,message:'地点不能为空'},
                                      {maxLength:20,message:'地址长度不能超过20个字符'} ]"
                                      :validate-trigger="['change','input']"
                            >
                                <template #prefix>
                                    <icon-location />
                                </template>
                            </a-input>
                        </a-space>
                    </a-form-item>
                    <!--图片-->
                    <a-form-item field="imageUrl" label="图片" >
                        <!--头像-->
                        <a-space direction="vertical" >
                            <a-upload
                                    action="http://47.113.195.180:8081/api/get/url"
                                    :fileList="file?[file]:[]"
                                    :show-file-list="false"
                                    @change="fileUp"
                                    @progress="onProgress"
                                    @success="onSuccess"
                            >

                                <template #upload-button>
                                    <div
                                            :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''}`"
                                    >
                                        <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">

                                            <img :src="file.url" />
                                            <div class="arco-upload-list-picture-mask">
                                                <IconEdit />
                                            </div>
                                            <!--上传进度-->
                                            <a-progress
                                                    v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent" type="circle"
                                                    size="small"
                                                    :style="{position: 'absolute', left: '50%',top: '50%',transform: 'translateX(-50%) translateY(-50%)',}"
                                            />
                                        </div>

                                        <div class="arco-upload-picture-card" v-else>
                                            <div class="arco-upload-picture-card-text">
                                                <IconPlus />
                                                <div style="margin-top: 10px; font-weight: 600">上传图片</div>
                                            </div>
                                        </div>

                                    </div>
                                </template>
                            </a-upload>
                        </a-space>

                    </a-form-item>

                    <a-form-item>
                        <a-space>
                            <a-button html-type="submit" style="margin-left: 415px;margin-top: 50px;width: 100px;"
                                      size="large" @click="publish"
                                    shape="round" type="primary">发布</a-button>

                        </a-space>
                    </a-form-item>
                </a-form>
            </a-page-header>
            </a-card>
        </div>


    </div>

</template>

<script  setup>
    import {reactive} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";

    const router=useRouter();
    const route=useRoute();

    const currentUser = ref({})
    currentUser.value= getCurrentUser();
    const description=ref('')


    /*需要填写的帖子内容*/
    const form = reactive({
        title: '',
        description: '',
        createTime: '',
        address: '',
        imageUrl: '',
    });
    const file = ref();
    const fileUp = (_, currentFile) => {
        file.value = {
            ...currentFile,
        }
    };

    const onSuccess=(res)=>{
        console.log(res.response.code)

        if (res.response.code!==0){
            message.error("上传图片失败");
            return
        }
        form.imageUrl=res.response.data
    }


    //上传进度
    const onProgress = (currentFile) => {
        file.value = currentFile;
    };

    //日期时间选择器
    function onSelect(dateString, date){
        form.createTime=date;
    };
    function onChange(dateString, date){
        form.createTime=date;
    };
    const style= reactive({ width: '245px', marginBottom: '24px', marginRight: '24px' });


    const publish=async () => {

        const res = await myAxios.post('/post/publish', {
            title: form.title,
            description: form.description,
            createTime: form.createTime,
            address: form.address,
            imageUrl: form.imageUrl,

        })

        if (res.code === 0) {
            message.success("发布成功！")
            const redirectUrl = route.query?.redirect ? route.query.redirect : '/about';
            setTimeout(() => {
                window.location.href = redirectUrl
            }, 500);
        } else {
            message.error(res.description?`${res.description}`:'发布失败！')
        }

    }

    //格式化日期
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    };
    const dateTimeFormat = new Intl.DateTimeFormat('default', options);


</script>

<style scoped>

    .list {
        width: 72%;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0px;
        margin: auto;
    }

    .arco-upload-picture-card {
        display: flex;
        min-width: 180px;
        height: 180px;
        margin-bottom: 0;

    }

    .arco-upload-list-picture {
        display: flex;
        min-width: 180px;
        height: 180px;

    }

</style>
